/*
 * @Author: 雷宇航
 * @Date: 2022-03-23 16:29:44
 * @LastEditTime: 2022-03-23 18:39:00
 * @LastEditors: 雷宇航
 * @Description: 自定义多行文本框
 * @FilePath:
 */
import './index.less'
import T from 'ant-design-vue/es/input/TextArea'

export default {
  name: "HTextarea",
  props: Object.assign({}, T.props, {
    value: {
      type: [String, Number],
    }
  }),
  watch: {
    value: {
      immediate: true,
      handler(val) {
        this.localValue = val
      },
    }
  },
  data() {
    return {
      localValue: '',
    }
  },
  methods: {
    renderTextarea(h) {
      return h('a-textarea', {
        class: "h-textarea-wrapper-input",
        props: {
          ...this.$props,
          value: this.localValue,
        },
        on: {
          change: this.textareaChange
        }
      })
    },
    renderCounter(h) {
      return this.maxLength ? <span
          class={"h-textarea-wrapper-counter"}>{((this.localValue && this.localValue.length) || 0) + '/' + this.maxLength}</span> :
        <span></span>
    },
    textareaChange(e) {
      this.localValue = e.target.value
      this.$emit('change', e.target.value, e)
    },
  },
  render(h) {
    return h('div', {
      class: "h-textarea-wrapper",
    }, [this.renderTextarea(h), this.renderCounter(h)])
  },
}